<template>
       <div class="dg">
                 <p class="yh">
                  <el-avatar :src="dg.pic" /><br>
                    {{ dg.name }}</p>   
                </div>
                <div class="lr">
<div class="lt1">
 <div class="flex flex-wrap gap-4">
    <el-card style="width: 130px" shadow="always">Always</el-card>
    <el-card style="width: 130px" shadow="hover">Hover</el-card>
    <el-card style="width: 130px" shadow="never">Never</el-card>
      <el-card style="width: 130px" shadow="always">Always</el-card>
    <el-card style="width: 130px" shadow="hover">Hover</el-card>
    <el-card style="width: 130px" shadow="never">Never</el-card>
  </div>
</div>
<div >
     <el-card style="width: 250px;height: 200px;">
    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
  </el-card>
</div>
<div >
     <el-card style="width: 500px;height: 300px;">
    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
  </el-card>
</div>
<div class="lt4">
    <p>暂无信息</p>
</div>
                </div>
</template>

<script setup>
import { getUserInfoApi } from '@/api/api'
import { ref } from 'vue'
const dg = ref([])
getUserInfoApi().then(res => {
    console.log(res);
    dg.value = res.data.data
})
</script>

<style lang="scss" scoped>
.dg{
    width: 900px;
    height: 300px;
    background-color: #7acff9;
    .yh{
        position: relative;
        top: 80px;
        left: 400px;
    }
}
.lr{
width: 900px;
    height: 600px;
    background-color: #ececec;
    div{
        margin: 10px;float: left; 
    }
    .lt1{
width: 550px;
    height: 200px; background-color: #fff;

    }
//        .lt2{
// width: 300px;
//     height: 200px;float: left;  background-color: #fff;
//     }
//        .lt3{
// width: 550px;
//     height: 300px;float: left;  background-color: #fff;
//     }
       .lt4{
width: 300px;
    height: 300px; background-color: #fff;
    }

}
</style>